<template>
  <base-layout
    :dialogVisible="dialogVisible"
    :dialogTitle="dialogTitle"
    @dialog-close="dialogClose"
  >
    <template #contentPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :show-message="false"
        :hide-required-asterisk="true"
        :model="fromdata"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row class="">
          <el-col :span="12">资产信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-form-item label="资产编号:">
            <el-input clearable v-model.number="fromdata.assetCode" disabled />
          </el-form-item>
          <el-form-item label="资产名称:">
            <el-input clearable v-model="fromdata.assetName" />
          </el-form-item>
          <el-form-item label="资产类型:" prop="type">
            <el-select
              clearable
              ref="dragSelect"
              v-model="fromdata.assetType"
              class="drag-select"
            >
              <el-option
                v-for="item in assetTypeOptios['资产类型']"
                :key="item.index"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="资产金额:">
            <el-input clearable v-model.number="fromdata.assetPrice" />
          </el-form-item>
          <el-form-item label="资产数量:">
            <el-input clearable v-model.number="fromdata.assetNum" />
          </el-form-item>
          <el-form-item label="资产总金额:">
            <el-input clearable v-model.number="fromdata.assetAmount" disabled />{{
              assetAmount
            }}
          </el-form-item>
          <el-form-item label="存放地址:">
            <el-input clearable v-model="fromdata.address" />
          </el-form-item>
          <el-form-item label="备注:" prop="name">
            <el-input type="textarea" :rows="2" clearable v-model="fromdata.remark" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">资产人员</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-form-item label="资产管理人:" prop="manageUserName">
            <el-input
              clearable
              v-model="fromdata.manageUserName"
              @focus="employeeFocus"
            />
          </el-form-item>
          <el-form-item label="联系方式:" prop="phone">
            <el-input clearable v-model.number="fromdata.phone" />
          </el-form-item>
          <el-form-item label="资产使用人:" prop="type">
            <el-select
              style="width: 220px"
              clearable
              ref="dragSelect"
              v-model="fromdata.useUserName"
              class="drag-select"
            >
              <el-option
                v-for="item in dict.useUserNameOptions"
                :key="item.id"
                :value="item.id"
                :label="item.userName"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">资产照片</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpRequest"
            :fileList="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-row>
        <el-row>
          <el-col :span="24" align="right">
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #dialog>
      <EmployeeTable
        @roleIdListSelectCheck="employeListSelectCheck"
        :checkList="[fromdata.manageUserName]"
      />
    </template>
  </base-layout>
</template>
<script>
import {
  getDict,
  fileUpload,
  getImageUrl,
  parseTimeToYMDHMS,
  getStoreId,
} from "@/utils/index";
import {
  details,
  addData,
  updateData,
  getAssetCode,
} from "@/api/after-sale/finance/assets";
import baseMixin from "@/mixins/base";
import { userPage } from "@/api/after-sale/personnel/index";
import EmployeeTable from "../systemManage/store/components/EmployeeTable";
export default {
  components: {
    EmployeeTable,
  },
  mixins: [baseMixin({})],
  data() {
    return {
      fromdata: {
        address: "",
        assetAmount: "",
        assetCode: "",
        assetName: "",
        assetNum: "",
        assetPrice: "",
        assetType: "",
        manageUserName: "",
        phone: "",
        photos: [],
        remark: "",
        storeId: getStoreId(),
        useUserName: "",
      },
      rules: {},
      fileList: [],
      dict: {
        useUserNameOptions: [],
      },
      assetTypeOptios: [],
    };
  },
  async created() {
    const { data } = await getAssetCode();
    this.fromdata.assetCode = data;

    this.assetTypeOptios = getDict(["资产类型"]);
    this.getUsers();

    const id = this.$route.query && this.$route.query.id;
    if (id) {
      const { data } = await details(id);
      if (data) {
        this.fromdata = {
          ...data,
          photos: data.photos ? data.photos.split(",") : [],
        };
        this.fromdata.photos.forEach((item, index) => {
          this.fileList.push({
            name: index,
            url: getImageUrl(item),
          });
        });
      }
    }
  },
  methods: {
    async getUsers() {
      const { success, data } = await userPage({}, 10000, 1);
      if (success) {
        this.dict.useUserNameOptions = data.content;
      }
    },
    //打开员工选择列表
    employeeFocus() {
      this.handleDataInsert("资产管理人");
    },
    //员工选择
    employeListSelectCheck(select) {
      this.fromdata.manageUserName = select[0].userName;
      this.fromdata.phone = select[0].phone;
      this.fromdata.userId = select[0].id;
      this.dialogClose();
    },
    //车辆展示图上传
    httpRequest(value) {
      fileUpload(value.file).then((res) => {
        let { success, data } = res;
        if (success) this.fromdata.photos.push(data.id);
      });
    },
    onSubmit() {
      this.$refs.fromdata.validate((valid) => {
        if (valid) {
          this.saveData();
        } else {
          return false;
        }
      });
    },
    async saveData() {
      let params = JSON.parse(JSON.stringify(this.fromdata));
      params.photos = params.photos.join(",");
      const { success } = params.id ? await updateData(params) : await addData(params);
      if (success) {
        this.$message({
          message: "操作成功",
          type: "success",
        });
        this.closeRouter();
      } else {
        this.$message.error("操作失败");
      }
    },
  },
  computed: {
    assetAmount: function () {
      this.fromdata.assetAmount = this.fromdata.assetNum * this.fromdata.assetPrice;
    },
  },
};
</script>
